<template>
  <div class="miniAppBoxContainer">
    <div class="miniAppBox" :style="{ height: dynamicData.miniBgcHeight }">
      <div
        class="miniAppBgc"
        :style="{
          backgroundImage: `url(${dynamicData.miniBgc})`,
          height: dynamicData.miniBgcHeight
        }"
      ></div>

      <div class="topImg _image" :style="{ backgroundImage: `url(${props?.backgroundImg})` }"></div>

      <div
        class="center"
        :style="{
          backgroundImage: `url(${dynamicData.centerImg})`,
          height: dynamicData.centerImgHeight
        }"
      >
        <div class="checkInBox">已累计打卡 <span style="color: #8adf4b"> 0 </span> 单 </div>
        <div class="checkInImgList">
          <div class="imgItem" v-for="(i, index) in list" :key="i.id">
            <div
              class="_img _image"
              :style="{ backgroundImage: `url(${i.rewardImageUrl || props?.uncheckedIcon})` }"
            ></div>
            <span class="_No" v-show="!i.rewardImageUrl">{{ index + 1 }}</span>
          </div>
        </div>
        <button class="receive _button">{{ props.buttonName }}</button>
      </div>

      <div class="checkInRewardBox" :style="{ bottom: dynamicData.bottom }">
        <div class="_item" v-for="i in props.tableData" :key="i">
          <div
            class="itemImg _image"
            :style="{
              backgroundImage: `url(${
                Array.isArray(i.rewardImageUrl) && i.rewardImageUrl.length > 0
                  ? i.rewardImageUrl[0].url
                  : i.rewardImageUrl
              })`
            }"
          ></div>
          <div class="itemName">{{ i.name }}</div>
        </div>
      </div>
    </div>
    <div style="margin: 20px 0" v-if="props.tableData.length">
      <el-button v-for="(i, index) in props.tableData" :key="index" @click="handleSwitching(i)">{{
        `打卡奖励${index + 1}返显图`
      }}</el-button>
    </div>
    <!-- 遮罩层 -->
    <div class="overlay _image" :style="{ backgroundImage: `url(${overlayBgImage})` }">
      <div class="overlayBox">
        <img :src="overlayImg" alt="" />
        <button class="confirmed _button">确定</button>
        <el-icon class="_el-icon" color="#fff" size="34"><CircleClose /></el-icon>
      </div>
    </div>
  </div>
</template>
<script setup>
import _1minicenter from '@/assets/images/1minicenter.png'
import _2minicenter from '@/assets/images/2minicenter.png'
import _3minicenter from '@/assets/images/3minicenter.png'
import _1row from '@/assets/images/1row.png'
import _2row from '@/assets/images/2row.png'
import _3row from '@/assets/images/3row.png'
import overlayBgImage from '@/assets/images/overlayBgImage.png'
import notPopup from '@/assets/images/notPopup.png'

const props = defineProps({
  tableData: {
    type: Array,
    default: () => []
  },
  buttonName: {
    type: String
  },
  backgroundImg: {
    type: String
  },
  checkedIcon: {
    type: String
  },
  uncheckedIcon: {
    type: String
  }
})

const overlayImg = ref(notPopup)

const config = [
  {
    max: 4,
    centerImg: _1minicenter,
    centerImgHeight: '248px',
    miniBgc: _1row,
    miniBgcHeight: '812px',
    bottom: '76px'
  },
  {
    max: 8,
    centerImg: _2minicenter,
    centerImgHeight: '349px',
    miniBgc: _2row,
    miniBgcHeight: '854px',
    bottom: '20px'
  },
  {
    max: Infinity,
    centerImg: _3minicenter,
    centerImgHeight: '450px',
    miniBgc: _3row,
    miniBgcHeight: '965px',
    bottom: '34px'
  }
]
const list = computed(() => {
  if (!Array.isArray(props.tableData) || props.tableData.length === 0) {
    return []
  }
  let maxVal = 0
  // 过滤
  const filteredData = props.tableData.filter((item) => item?.rules)
  if (filteredData.length === 0) {
    return []
  }
  // 获取最大单
  maxVal = Math.max(...filteredData.map((item) => item?.rules))
  // 生成数组
  const arr = Array.from({ length: maxVal }, (_, i) => ({
    rewardImageUrl: null,
    popupImageUrl: null,
    id: i + 1
  }))
  // 循环替换Icon/弹窗图片
  props.tableData.find((i) => {
    arr.forEach((e) => {
      if (i.rules === e.id) {
        // console.log(i.rewardImageUrl)
        e.rewardImageUrl =
          Array.isArray(i.rewardImageUrl) && i.rewardImageUrl.length > 0
            ? i.rewardImageUrl[0].url
            : i.rewardImageUrl
        e.popupImageUrl =
          Array.isArray(i.popupImageUrl) && i.popupImageUrl.length > 0
            ? i.popupImageUrl[0].url
            : i.popupImageUrl
      }
    })
  })
  // console.log({ arr })
  return arr
})

const dynamicData = computed(() => {
  const length = list.value?.length
  return config.find((item) => length <= item.max)
})

/**切换弹窗图 */
function handleSwitching(i) {
  console.log('切换弹窗图', i)
  if (i?.popupImageUrl) {
    overlayImg.value =
      Array.isArray(i.popupImageUrl) && i.popupImageUrl.length
        ? i.popupImageUrl[0].url
        : i.popupImageUrl
  } else {
    overlayImg.value = notPopup
  }
}

defineExpose({ handleSwitching })
</script>
<style lang="scss" scoped>
._button {
  border: none;
  cursor: pointer;
}
._image {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
}
.miniAppBoxContainer {
  display: flex;
  flex-direction: column;
}
.miniAppBox {
  position: relative;
  width: 375px;
  background-color: #f6f6f6;
  .miniAppBgc {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    z-index: 3;
  }
  .topImg {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 487px;
    z-index: 2;
  }
  .center {
    width: 346px;
    position: absolute;
    left: 15px;
    top: 283px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    z-index: 4;
    .checkInBox {
      margin: 59px 0 0 27px;
      color: #666;
      font-family: 'PingFang SC';
      font-size: 14px;
    }
    .checkInImgList {
      display: flex;
      flex-wrap: wrap;
      margin-top: 8px;
      padding-left: 18px;
      .imgItem {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 70px;
        height: 82px;
        border-radius: 26px;
        background: #f3f3f3;
        margin: 0 10px 10px 0;
        cursor: pointer;
        ._img {
          width: 58px;
          height: 42px;
        }
        ._No {
          position: absolute;
          top: 54%;
          left: 50%;
          transform: translate(-50%, -50%);
          color: #fff;
          font-family: 'PingFang SC';
          font-size: 20px;
        }
        &:nth-child(4n) {
          margin: 0;
        }
      }
    }
    .receive {
      position: absolute;
      left: 50%;
      bottom: 33px;
      transform: translateX(-50%);
      width: 308px;
      height: 44px;
      border-radius: 22px;
      background: #d6d6d6;
      color: #fff;
      font-family: 'PingFang SC';
      font-size: 15px;
      box-sizing: border-box;
    }
  }
  .checkInRewardBox {
    position: absolute;
    bottom: 34px;
    left: 15px;
    width: 346px;
    height: 137px;
    z-index: 4;
    // background: red;
    overflow-x: auto;
    white-space: nowrap;
    padding: 20px 0 0 0;
    ._item {
      display: inline-block;
      min-height: 112px;
      margin: 0 20px;
      .itemImg {
        width: 102px;
        height: 74px;
      }
      .itemName {
        color: #000;
        text-align: center;
        font-family: 'PingFang SC';
        font-size: 14px;
        margin: 8px 0 0 0;
      }

      &:last-child {
        margin: 0 20px 0 0;
      }
      &:first-child {
        margin: 0 20px 0 20px;
      }
    }
  }
}

.overlay {
  width: 375px;
  height: 812px;
  display: flex;
  justify-content: center;
  align-items: center;
  .overlayBox {
    width: 296px;
    height: 420px;
    position: relative;
    img {
      width: 100%;
      height: 100%;
    }
    .confirmed {
      position: absolute;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
      width: 168px;
      height: 43px;
      border-radius: 27px;
      background: #8adf4b;
      color: #fff;
      font-family: 'PingFang SC';
      font-size: 16px;
    }
    ._el-icon {
      margin-top: 34px;
      width: 100%;
    }
  }
}
</style>
